<script setup>
import { ref,reactive,computed,watch,watchEffect,onMounted,nextTick,provide,inject, onUnmounted} from "vue";
import ziTitle from "./file.vue";
import ziGroup from "./dir.vue";
import {blur,click} from "./fileHook"
const props=defineProps({
	title:{
		type:String,
		default:""
	},
	data:{
		type:Array,
		default:[]
	}
})
const emits=defineEmits(["open"])

const dirClick=ref(true)
// onMounted(()=>{
// 	document.addEventListener("click",onBlur,{capture:true})
// })
// onUnmounted(()=>{
// 	document.removeEventListener("click",onBlur)
// })
// function onBlur(){
// 	console.log("1111111:",1111111);
// }
function focusClick(){
	blur.value=true
}
function focusBlur(){
	blur.value=false
}
const vFocus = {
	mounted: (el,{value:{focusClick=()=>undefined,focusBlur=()=>undefined}}) => {
		el.addEventListener("mouseup",focusClick)
		el.addEventListener("blur",focusBlur)
	},
	unmounted(el,{value:{focusClick=()=>undefined,focusBlur=()=>undefined}}){
		el.removeEventListener("mouseup",focusClick)
		el.removeEventListener("blur",focusBlur)
	}
}

function emitOpen(e){
	emits("open",e)
}
</script>


<template>
	<div class="dir" v-focus="{focusClick,focusBlur}" tabindex="1" @mousedown="click=true">
		<div v-for="temp in data" :key="temp.title">
			<zi-group
				v-if="temp.children"
				:dir="temp.children"
				:title="temp.title"
				:icon="temp.icon"
				@myClick="emitOpen"
			/>
			<zi-title v-else :icon="temp.icon" :data="temp.data" @myClick="emitOpen">
				{{ temp.title }}
			</zi-title>
		</div>
	</div>
</template>


<style scoped>
.dir{
	overflow: auto;
    padding-bottom: 2em;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: rgb(56, 56, 56);
	color: #fff;
	font-size: 12px;
	--bg-hover:#0000005b;
	--empty-color:#ababab;
	
	--bg-action: #0059ff6e;
	--br-action: #0059ff;
	
	--bg-blur: #b5b5b51f;
	--br-blur: #b5b5b51f;
	min-width: 10em;
}
.dir::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: 5px;
    background-color: transparent;
}
.dir::-webkit-scrollbar-thumb{/*滚动条*/
    background-color:rgb(94, 94, 94);
    border-radius: 5px;
}
.dir::-webkit-scrollbar-track{/*没有滚动条的轨道部分*/
    width: 20px;
    background-color: transparent;
}
.dir::-webkit-scrollbar-button{/*上下按钮*/
height:0;

}
.dir::-webkit-scrollbar-track-piece{
    width: 20px;
    background-color: transparent;
}
.dir::-webkit-scrollbar-corner{
}
.dir::-webkit-resizer{/*轨道*/
}

</style>